<style scope="this api replaced by slot-scope in 2.5.0+">
#container {
  position: relative;
}
.tip {
  display: none;
  position: absolute;
  opacity: 0.5;
  background: #000;
  color: #fff;
  border-radius: 5px;
  padding: 5px;
  font-size: 8px;
  z-index: 99;
}
</style>


<template>
    <div id="container">
        
        <canvas id="myCanvas"  @mousemove="moveOnCanvas"></canvas>
        <div class="tip" :style="tipClass" >
          <p v-for="(item,index) in tipMessage" :key="index">{{item.gene}}({{item.count}})</p>
        </div>
        <div style="text-align:center">
          <span>Mutation Type:</span>
          <span :style="{color:typeColor[0].color}">slient</span>
          <span :style="{color:typeColor[1].color}">missense</span>
          <span :style="{color:typeColor[2].color}">inframe_indel</span>
          <span :style="{color:typeColor[3].color}">frameshift</span>
          <span :style="{color:typeColor[4].color}">nonsense</span>
        </div>
    </div>
</template>

<script>
import { varca } from "@/api/index";
export default {
  data() {
    return {
      list: [
        { label: "部门1", value: 300 },
        { label: "部门2", value: 400 },
        { label: "部门3", value: 120 },
        { label: "部门4", value: 330 },
        { label: "部门5", value: 350 },
        { label: "部门6", value: 230 }
      ],
      // picture: {
      //   0: {
      //     "p.V981Ffs*88": [
      //       { id: 1, mutationType: "A" },
      //       { id: 2, mutationType: "A" },
      //       { id: 3, mutationType: "B" },
      //       { id: 4, mutationType: "B" },
      //       { id: 5, mutationType: "C" },
      //       { id: 6, mutationType: "C" },
      //       { id: 7, mutationType: "A" },
      //       { id: 8, mutationType: "A" },
      //       { id: 9, mutationType: "A" },
      //       { id: 10, mutationType: "A" }
      //     ],
      //     "p.S206F": [
      //       { id: 1, mutationType: "A" },
      //       { id: 2, mutationType: "A" },
      //       { id: 3, mutationType: "B" },
      //       { id: 4, mutationType: "B" },
      //       { id: 5, mutationType: "C" },
      //       { id: 6, mutationType: "C" }
      //     ]
      //   },
      //   1: {
      //     "p.M1?": [{ id: 1, mutationType: "A" }, { id: 2, mutationType: "A" }]
      //   },
      //   5: {
      //     "p.S206F": [{ id: 0, mutationType: "A" }]
      //   },
      //   10: {
      //     "p.S206F": [{ id: 0, mutationType: "C" }]
      //   }
      // },
      picture: {},
      typeColor: [
        {
          type: "slient",
          color: "rgb(0, 204, 102)"
        },
        {
          type: "missense",
          color: "rgb(0, 0, 255)"
        },
        {
          type: "inframe_indel",
          color: "rgb(153, 51, 255)"
        },
        {
          type: "frameshift",
          color: "rgb(255,102,0)"
        },
        {
          type: "nonsense",
          color: "rgb(255,0,0)"
        }
      ],
      xAxis: [],
      animateArr: [], //存柱状图数据 x坐标 y w,h
      tipMessage:[],
      tipClass:{
        left:0,
        top:0,
        display:'none'
      }
    };
  },
  methods: {
    drawBar() {
      let w = 800,
        h = 600;
      let cv = document.getElementById("myCanvas");
      cv.height = 600;
      cv.width = 800;
      let ctx = cv.getContext("2d");
      ctx.strokeRect(50, 50, w - 100, h - 100);

      let listLen = this.list.length;
      let colwidth = (w - 100) / (2 * listLen + 1);

      for (let i = 0; i < listLen; i++) {
        let rw = colwidth;
        let rh = this.list[i].value;
        let x = (2 * i + 1) * colwidth + 50;
        let y = h - 50 - rh;
        ctx.strokeRect(x, y, rw, rh);
        // ctx.fillStyle = "red"; //颜色填充样式设置为“渐变对象”
        // ctx.fillRect(x, y, rw, rh);

        let g = ctx.createLinearGradient(x, y, x, y + rh); //创建渐变区域

        g.addColorStop(0, "red");
        g.addColorStop(1, "white");

        ctx.fillStyle = g; //颜色填充样式设置为“渐变对象”
        ctx.fillRect(x, y, rw, rh);

        ctx.font = "20px Arial";
        ctx.fillStyle = "black";
        ctx.fillText(this.list[i].label, x, 570);
      }
    },
    drawPic() {
      let w = 1800,
        h = 600;
      let cv = document.getElementById("myCanvas");
      cv.height = h;
      cv.width = w;
      let ctx = cv.getContext("2d");
      ctx.strokeRect(50, 50, w - 100, h - 100);

      let count = this.xAxis[this.xAxis.length - 1]; //取this.xAxis中最大值
      // let colWidth = (w - 100) / (2 * count + 1);
      let colWidth = (w - 100) / (count + 1); //计算每条的宽度 两个数之间的空白不计算

      for (let i = 0; i <= count; i++) {
        //从0开始递增1至最大值
        //根据外层的键值循环 0 1 5 10
        // let parentKey = Object.keys(this.picture)[i];
        let parentKey = i;
        let barHeight = 0;
        let rw = colWidth;
        // let x = 2 * i * colWidth;
        let x = i * colWidth;

        let newObject = []; //将外层对象下的列表合并  即0-p.V981Ffs*88  0-p.S206F下的数组合并为新数据
        let countByGene = []; //统计每个基因的数量
        if (this.picture[parentKey]) {
          //如果当前位置有数据
          Object.keys(this.picture[parentKey]).forEach(childKey => {
            //0-p.V981Ffs*88  0-p.S206F
            newObject = newObject.concat(this.picture[parentKey][childKey]);
            countByGene.push({
              gene: childKey,
              count: this.picture[parentKey][childKey].length
            });
          });
        }
        this.animateArr.push({
          x: x + 50,
          y: h - 50 - newObject.length,
          rw: rw,
          rh: newObject.length,
          xname: parentKey,
          detailData: countByGene
        });

        //按颜色分类画图
        if (newObject.length > 0) {
          for (let j = 0; j < this.typeColor.length; j++) {
            let countByColor = newObject.filter(
              item => item.mutationType == this.typeColor[j].type
            );
            let eachChildCount = countByColor.length; //数据太少高度太低，扩大十倍
            barHeight += eachChildCount;
            let rh = eachChildCount;
            let y = h - 50 - barHeight;
            ctx.fillStyle = this.typeColor[j].color;
            ctx.fillRect(x+50, y, rw, rh); //fillRect()绘制被填充的
          }
        }

        // //显示部分横坐标 取自this.xAxis
        let findxAxis = this.xAxis.findIndex(val => val == parentKey);
        if (findxAxis != -1) {
          ctx.fillRect(x + 50, h - 50, rw, 5); //画坐标对应的竖线
          ctx.font = "8px Arial";
          ctx.fillStyle = "black";
          ctx.fillText(parentKey, x + 45, h - 35);
        }
      }
    },
    moveOnCanvas(e) {
      let w = 1800,
        h = 600;
      let cv = document.getElementById("myCanvas");
      let ctx = cv.getContext("2d");
      // ctx.rect(50, 50, w - 100, h - 100);
      let box = cv.getBoundingClientRect();
      let pos = {
        x: e.clientX - box.left,
        y: e.clientY - box.top
      };

      for (var i = 0, item, len = this.animateArr.length; i < len; i++) {
        item = this.animateArr[i];

        // //按颜色分类画图
        // let parentKey = item.xname;
        // let barHeight = 0;
        // let newObject = []; //将外层对象下的列表合并  即0-p.V981Ffs*88  0-p.S206F下的数组合并为新数据
        // if (this.picture[parentKey]) {
        //   //如果当前位置有数据
        //   Object.keys(this.picture[parentKey]).forEach(childKey => {
        //     //0-p.V981Ffs*88  0-p.S206F
        //     newObject = newObject.concat(this.picture[parentKey][childKey]);
        //   });
        // }
        // if (newObject.length > 0) {
        //   for (let j = 0; j < this.typeColor.length; j++) {
        //     let countByColor = newObject.filter(
        //       item => item.mutationType == this.typeColor[j].type
        //     );
        //     let eachChildCount = countByColor.length; //数据太少高度太低，扩大十倍
        //     barHeight += eachChildCount;
        //     let rh = eachChildCount;
        //     let y = h - 50 - barHeight;
        //     ctx.fillStyle = this.typeColor[j].color;
        //     ctx.fillRect(item.x, y, item.rw, rh); //fillRect()绘制被填充的
        //   }
        // }


        //鼠标移动显示提示信息
        ctx.save(); //保存当前环境状态
        ctx.beginPath();
        ctx.rect(item.x, item.y, item.rw, item.rh); //创建总高度矩形，用来判断鼠标是否在矩形内
        if (ctx.isPointInPath(pos.x, pos.y)) {
          // ctx.clearRect(item.x, item.y, item.rw, item.rh);
          // ctx.fill();
          cv.style.cursor = "pointer";
          this.showInfo(pos, item.detailData, true);
          ctx.restore(); //返回之前保存过的路径状态和属性
          break;
        }
        this.showInfo(pos, item.detailData, false);
        cv.style.cursor = "default";
        // ctx.fill();
        ctx.restore();
      }
    },
    showInfo(pos, obj, isShow) {
      this.tipMessage = [];
      if (isShow) {
        this.tipMessage=obj;
        this.tipClass.left=pos.x + "px";
        this.tipClass.top=pos.y + "px";
        this.tipClass.display="block";
      }else{
        this.tipClass.display="none"
      }     
    },
    getPictureInfo() {
      let obj = {
        gene: "ABL1"
      };
      varca
        .getPictureInfo(obj)
        .then(res => {
          if (res.status == 200) {
            this.picture = res.data.picture;
            this.xAxis = res.data.genes.exons;
            console.log(this.xAxis);
            this.drawPic();
          } else {
            this.$Message.error(res.msg);
          }
        })
        .catch(error => {
          this.$Message.error(error);
        });
    }
  },
  mounted() {
    // this.drawBar();
    this.getPictureInfo();
  }
};
</script>

